<template>
  <view class="store-selector">
    <view class="current-store" @tap="showSelector = true">
      <view class="store-info">
        <text class="iconfont icon-store">📍</text>
        <text class="store-name">{{ currentStore ? currentStore.name : '请选择门店' }}</text>
        <text class="iconfont icon-arrow-down">▼</text>
      </view>
    </view>
    
    <uni-popup ref="popup" type="bottom">
      <view class="popup-content">
        <view class="popup-header">
          <view class="title">选择门店</view>
          <view class="close" @tap="closePopup">
            <text class="iconfont icon-close">×</text>
          </view>
        </view>
        
        <scroll-view scroll-y class="store-list">
          <view 
            v-for="(store, index) in storeList" 
            :key="index" 
            class="store-item"
            :class="{ active: currentStore && currentStore.id === store.id }"
            @tap="selectStore(store)"
          >
            <view class="store-info">
              <view class="store-name">{{ store.name }}</view>
              <view class="store-address">{{ store.address }}</view>
            </view>
            <view class="store-distance" v-if="store.distance">
              {{ store.distance }}km
            </view>
          </view>
          
          <view class="empty-tip" v-if="storeList.length === 0">
            暂无门店信息
          </view>
        </scroll-view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
import { fetchStoreList } from '@/api/store'

export default {
  name: 'StoreSelector',
  data() {
    return {
      showSelector: false
    }
  },
  computed: {
    ...mapState({
      currentStore: state => state.currentStore,
      storeList: state => state.storeList
    })
  },
  methods: {
    ...mapMutations([
      'setCurrentStore',
      'setStoreList'
    ]),
    ...mapActions([
      'initStoreInfo'
    ]),
    async getStoreList() {
      try {
        const res = await fetchStoreList()
        if (res.code === 200) {
          this.setStoreList(res.data)
          // 如果没有选择门店且有门店列表，默认选择第一个
          if (!this.currentStore && res.data.length > 0) {
            this.selectStore(res.data[0])
          }
        }
      } catch (error) {
        console.error('获取门店列表失败', error)
        uni.showToast({
          title: '获取门店列表失败',
          icon: 'none'
        })
      }
    },
    selectStore(store) {
      this.setCurrentStore(store)
      this.closePopup()
      this.$emit('store-selected', store)
    },
    openPopup() {
      this.$refs.popup.open()
    },
    closePopup() {
      this.$refs.popup.close()
    }
  },
  watch: {
    showSelector(val) {
      if (val) {
        this.openPopup()
      } else {
        this.closePopup()
      }
    }
  },
  mounted() {
    this.initStoreInfo()
    this.getStoreList()
  }
}
</script>

<style lang="scss" scoped>
.store-selector {
  .current-store {
    display: flex;
    align-items: center;
    padding: 10rpx 20rpx;
    border-radius: 8rpx;
    
    .store-info {
      display: flex;
      align-items: center;
      
      .iconfont {
        margin-right: 10rpx;
        font-size: 28rpx;
        
        &.icon-arrow-down {
          margin-left: 10rpx;
          font-size: 24rpx;
        }
      }
      
      .store-name {
        font-size: 28rpx;
        font-weight: bold;
        max-width: 200rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  
  .popup-content {
    background-color: #fff;
    border-radius: 20rpx 20rpx 0 0;
    
    .popup-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 1px solid #eee;
      
      .title {
        font-size: 32rpx;
        font-weight: bold;
      }
      
      .close {
        padding: 10rpx;
        .iconfont {
          font-size: 36rpx;
        }
      }
    }
    
    .store-list {
      max-height: 60vh;
      padding: 0 20rpx;
      
      .store-item {
        display: flex;
        justify-content: space-between;
        padding: 30rpx 20rpx;
        border-bottom: 1px solid #f5f5f5;
        
        &.active {
          background-color: #f7f8fa;
        }
        
        .store-info {
          flex: 1;
          
          .store-name {
            font-size: 30rpx;
            font-weight: bold;
            margin-bottom: 10rpx;
          }
          
          .store-address {
            font-size: 26rpx;
            color: #999;
          }
        }
        
        .store-distance {
          font-size: 26rpx;
          color: #666;
          display: flex;
          align-items: center;
        }
      }
      
      .empty-tip {
        padding: 100rpx 0;
        text-align: center;
        font-size: 28rpx;
        color: #999;
      }
    }
  }
}
</style> 